<template>
  <el-menu
      default-active="1"
      class="el-menu-vertical-demo"
      @select="handleSelect"
      background-color="#f5f5f5"
      text-color="#333"
      active-text-color="#409EFF"
  >
    <el-menu-item index="1">
      <i class="el-icon-user"></i>
      <span>订单</span>
    </el-menu-item>
    <el-menu-item index="2">
      <i class="el-icon-message"></i>
      <span>我的消息</span>
    </el-menu-item>
    <el-submenu index="3">
      <template #title>
        <i class="el-icon-wallet"></i>
        <span>钱包</span>
      </template>
      <el-menu-item index="3-1">优惠券</el-menu-item>
      <el-menu-item index="3-2">积分</el-menu-item>
    </el-submenu>
    <el-menu-item index="4">
      <i class="el-icon-star-on"></i>
      <span>我的收藏</span>
    </el-menu-item>
    <el-menu-item index="5">
      <i class="el-icon-tickets"></i>
      <span>我的发票</span>
    </el-menu-item>
    <el-menu-item index="6">
      <i class="el-icon-info"></i>
      <span>常用信息</span>
    </el-menu-item>
    <el-menu-item index="7">
      <i class="el-icon-setting"></i>
      <span>个人中心</span>
    </el-menu-item>
  </el-menu>
</template>

<script setup>
import { useRouter } from 'vue-router';

const router = useRouter();

const handleSelect = (index) => {
  switch(index) {
    case '1':
      router.push('/profile/orders');
      break;
    case '2':
      router.push('/profile/messages');
      break;
    case '3-1':
      router.push('/profile/coupons');
      break;
    case '3-2':
      router.push('/profile/points');
      break;
    case '4':
      router.push('/profile/favorites');
      break;
    case '5':
      router.push('/profile/invoices');
      break;
    case '6':
      router.push('/profile/info');
      break;
    case '7':
      router.push('/profile/center');
      break;
    default:
      router.push('/profile/orders');
      break;
  }
};
</script>

<style scoped>
.el-menu-vertical-demo {
  height: 100vh;
  background-color: #f5f5f5;
  border-right: 1px solid #ebeef5;
}

.el-menu-item {
  padding: 0 20px;
  height: 56px;
  line-height: 56px;
  font-size: 16px;
}

.el-menu-item i {
  margin-right: 10px;
}

.el-submenu__title {
  font-size: 16px;
}

.el-menu-item:focus,
.el-menu-item:hover,
.el-menu-item:active,
.el-menu-item.is-active {
  background-color: #e0f0ff;
}
</style>
